<template>
	<view class="wrap">
		<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
		<view class="info">
			<view class="avatar">
				<view class="photo">
					<image v-if="userStatus == 0" class="img" :src="firstavatarUrl" mode=""></image>
					<image v-else class="img" :src="avatarUrl"></image>
					<image v-if="isVip" class="level" src="https://tb.wuyouzhuan888.com/applet-icon/level.png" mode=""></image>

				</view>
				<view class="info1">
					<view class="top">
						{{nickname}}
					</view>
					<view class="status" v-if="!isIPhone && isMaster == 1">
						<text v-if="isVip">会员到期时间：{{vipExpireTime}}</text>
						<text v-else>未开通（开通会员享受更多权益）</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tabs" v-if="!isIPhone">
			<u-tabs height="60" bg-color="none" font-size="28" active-color="#fff" :bar-style="barSty"
				:active-item-style="ActiveStyle" inactive-color="#fff" name="categoryName" :list="categoryList"
				:current="categoryCurrent" @change="categoryChange">
			</u-tabs>
		</view>
		<view class="list" v-if="categoryCurrent==1">
			<view class="item" v-for="(item,index) in list" @click="detail(item)">
				<view class="top">
					<view class="left">
						<image class="icon" src="https://tb.wuyouzhuan888.com/applet-icon/level1.png" mode=""></image>
						<text>{{item.vipName}}</text>
					</view>
					<view v-if="item.status == 1" class="right">
						<image class="status" src="https://tb.wuyouzhuan888.com/applet-icon/orderStatus2.png" mode="">
						</image>
						<text>已支付</text>
					</view>
					<view v-else class="right">
						<image class="status" src="https://tb.wuyouzhuan888.com/applet-icon/orderStatus1.png" mode="">
						</image>
						<text style="color: #FFC01F;">待支付</text>
					</view>
				</view>
				<view class="bot">
					<view class="li">
						支付金额：{{item.price}}元
					</view>
					<view class="li">
						交易类型：{{item.payWay}}
					</view>
					<view class="li">
						订单编号：{{item.orderNo}}
						<image @click.stop="copy(item.orderNo)" class="copy" src="@https://tb.wuyouzhuan888.com/applet-icon/copy.png" mode="">
						</image>
					</view>
					<view class="li">
						创建时间：{{item.createTime}}
					</view>
					<view class="li">
						支付时间：{{item.payTime || ''}}
					</view>
				</view>
			</view>
			<!-- 加载中提示 -->
			<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="10"
				margin-bottom="10" />
		</view>
		<view class="list" v-if="categoryCurrent==0">
			<view class="item" v-for="(item,index) in list1" @click="goto()">
				<view class="top">
					<view class="left">
						<text>{{item.vipName}}</text>
					</view>
					<view v-if="item.status == 1" class="right">
						<image class="status" src="https://tb.wuyouzhuan888.com/applet-icon/orderStatus2.png" mode="">
						</image>
						<text>已支付</text>
					</view>
					<view v-else class="right">
						<image class="status" src="https://tb.wuyouzhuan888.com/applet-icon/orderStatus1.png" mode="">
						</image>
						<text style="color: #FFC01F;">待支付</text>
					</view>
				</view>
				<view class="bot">
					<view class="li">
						支付金额：{{item.price}}元
					</view>
					<view class="li">
						交易类型：{{item.payWay}}
					</view>
					<view class="li">
						订单编号：{{item.create_time}}
						<image @click.stop="copy(item.create_time)" class="copy" src="@https://tb.wuyouzhuan888.com/applet-icon/copy.png" mode="">
						</image>
					</view>
					<view class="li">
						创建时间：{{item.create_time}}
					</view>
					<view class="li">
						支付时间：{{item.payTime || ''}}
					</view>
				</view>
				<view class="more">
					点击查看制作记录
				</view>
			</view>
			<!-- 加载中提示 -->
			<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="10"
				margin-bottom="10" />
		</view>
		<view class="list" v-if="categoryCurrent==2">
			<view class="item" v-for="(item,index) in list2" @click="tz1(item)">
				<view class="top">
					<view class="left">
						<text>{{item.pro_name}}</text>
					</view>
					<view class="right">
						<image class="status1" src="https://tb.wuyouzhuan888.com/applet-icon/bi.png" mode="">
						</image>
						<text style="color: #FFFFFF;">-1</text>
					</view>
				</view>
				<view class="bot1">
					<view class="li">
						制作时间：{{item.create_time}}
						<view class="maskMore" style="display: flex;align-items: center;">
							再次制作
							<image src="https://tb.wuyouzhuan888.com/applet-icon/l3.png" style="width: 16rpx;height: 20rpx;margin-left: 6rpx;">
							</image>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载中提示 -->
			<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="10"
				margin-bottom="10" />
		</view>
		<u-empty v-if="isEmpty" color="#A897D9" text="暂无数据"
			src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>
		<view @click="toTop" v-if="scrollTop>60">
			<xuanfu></xuanfu>
		</view>
	</view>
</template>
<script>
	import HeadNavBar from '@/components/headnavbar/index';
	import xuanfu from '@/components/xuanfu.vue'
	export default {
		components: {
			HeadNavBar,
			xuanfu
		},
		data() {
			return {
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: 'linear-gradient(to right, #05FAFE, #EF44C4)'
				},
				categoryCurrent: 0,
				// 列表
				list: [],
				// 数据为空
				isEmpty: false,
				total: 0,
				page: 1,
				size: 10,
				status: "loadmore",
				// 苹果手机
				isIPhone: false,
				// 用户状态 0游客 1非游客
				userStatus: 0,
				nickname: '游客',
				// 用户头像
				avatarUrl: '',
				// 会员到期时间
				vipExpireTime: '',
				// 是否是会员
				isVip: false,
				firstavatarUrl: '',
				isMaster: '',
				categoryList: [{
						categoryName: '购买记录'
					},
					{
						categoryName: '会员记录'
					},
					{
						categoryName: '消耗记录'
					}
				],
				categoryFormData: {
					total: 0,
					pageSize: 10, //每页10条数据
					page: 1, //第几页
				},
				coins: 0,
				scrollTop: 0,
				list1: [],
				list2: []
			}
		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.page * this.size;
			if (this.categoryCurrent == 0) {
				if (allTotal < this.total) {
					//当前条数小于总条数 则增加请求页数
					//加载中状态
					this.status = "loading";
					this.page++;
					this.getOrdersList();
				} else {
					//加载完状态
					this.status = "noMore";
				}
			} else if (this.categoryCurrent == 1) {
				if (allTotal < this.total) {
					//当前条数小于总条数 则增加请求页数
					//加载中状态
					this.status = "loading";
					this.page++;
					this.getOrderList();
				} else {
					//加载完状态
					this.status = "noMore";
				}
			} else if (this.categoryCurrent == 2) {
				if (allTotal < this.total) {
					//当前条数小于总条数 则增加请求页数
					//加载中状态
					this.status = "loading";
					this.page++;
					this.getConsumeRecords()
				} else {
					//加载完状态
					this.status = "noMore";
				}
			}

		},
		onLoad() {
			this.isMaster = uni.getStorageSync('isMaster')
			this.firstavatarUrl = uni.getStorageSync('avatar')
			uni.showLoading({
				title: "加载中...",
			})
			if (uni.getStorageSync('userInfo')) {
				const userInfo = uni.getStorageSync('userInfo');
				this.userStatus = 1;
				this.nickname = userInfo.nickName;
				this.avatarUrl = userInfo.avatarUrl;
			} else {
				// 游客
				this.userStatus = 0;
				this.nickname = '游客';
			}

			// 判断手机平台是否为苹果
			this.isIPhone = (uni.getSystemInfoSync().osName == 'ios')

			if (this.isIPhone) {
				this.isEmpty = true;
			} else {
				this.getOrdersList()
			}
			// 获取会员信息
			this.getVipInfo();
		},
		mounted() {
			uni.hideLoading()
		},
		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			toTop() {
				if (this.scrollTop > 60) {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			tz1(item) {
				uni.navigateTo({
					url: '/pages/sys/video_bags/video_text?videoId=' + item.pro_id
				})
			},
			goto() {
				uni.navigateTo({
					url: '/pages/sys/user_bags/productionRecord'
				})
			},
			categoryChange(index) {
				this.categoryCurrent = index;
				// 重置加载状态
				this.status = "loading";
				// 重置页数
				this.categoryFormData.page = 1;
				this.page = 1
				// 重置列表数据
				this.list = [];
				if (this.categoryCurrent == 0) {
					this.getOrdersList()
				} else if (this.categoryCurrent == 1) {
					this.getOrderList()
				} else if (this.categoryCurrent == 2) {
					this.getConsumeRecords()
				}
			},
			detail(item) {
				const info = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: "/pages/sys/user_bags/orderDetail?info=" + info
				})
			},
			// 消耗记录
			getConsumeRecords() {
				this.$u.api.video.getConsumeRecords({
					page: this.page,
					size: this.size
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
					}
					// 推荐列表总数
					this.total = res.data.total;

					// 页数大于1则追加
					if (this.page > 1) {
						this.list2.push(...res.data.list);
					} else {
						this.list2 = res.data.list
					}

					if (this.size > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}

					if (this.list2.length == 0) {
						this.isEmpty = true;
					}
				})
			},
			// 获取购买列表
			getOrdersList() {
				this.$u.api.video.getOrdersList({
					page: this.page,
					size: this.size
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
					}
					// 推荐列表总数
					this.total = res.data.total;

					// 页数大于1则追加
					if (this.page > 1) {
						this.list1.push(...res.data.list);
					} else {
						this.list1 = res.data.list
					}

					if (this.size > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}

					if (this.list1.length == 0) {
						this.isEmpty = true;
					}
				})
			},
			// 获取会员列表
			getOrderList() {
				this.$u.api.mine.getOrderList({
					page: this.page,
					size: this.size
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
					}
					// 推荐列表总数
					this.total = res.data.total;

					// 页数大于1则追加
					if (this.page > 1) {
						this.list.push(...res.data.list);
					} else {
						this.list = res.data.list
					}

					if (this.size > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}

					if (this.list.length == 0) {
						this.isEmpty = true;
					}
				})
			},
			// 获取会员信息
			getVipInfo() {
				this.$u.api.mine.getVipInfo().then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg)
						return
					}
					this.isVip = res.data.isVip
					this.vipExpireTime = res.data.vipExpireTime
				})
			},
			copy(val) {
				uni.setClipboardData({
					data: val, // 必须字符串
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});

					}
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 32rpx;

		.list {
			margin-top: 32rpx;

			.item {
				margin-bottom: 32rpx;
				padding: 0 32rpx;
				border-radius: 22rpx;
				border: 1rpx solid #4F30A8;
				background: linear-gradient(to right, #213786, #3A156D);

				.bot1 {
					padding: 20rpx 0;
					line-height: 49rpx;
					font-size: 22rpx;
					font-family: HYQiHei-45S, HYQiHei;
					font-weight: normal;
					color: #B9B8FF;

					.li {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.copy {
						width: 30rpx;
						height: 30rpx;
						margin-left: 15rpx;
					}
				}

				.bot {
					padding: 20rpx 0;
					line-height: 49rpx;
					font-size: 22rpx;
					font-family: HYQiHei-45S, HYQiHei;
					font-weight: normal;
					color: #B9B8FF;

					.li {
						display: flex;
						align-items: center;

					}

					.copy {
						width: 30rpx;
						height: 30rpx;
						margin-left: 15rpx;
					}
				}

				.top {
					padding: 32rpx 0 20rpx 0;
					border-bottom: 1rpx solid #5260AB;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.icon {
							width: 38rpx;
							height: 40rpx;
						}

						text {
							font-size: 30rpx;
							font-family: PingFang HK-Light, PingFang HK;
							font-weight: 300;
							color: #FFFFFF;
							margin-left: 10rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.status {
							width: 32rpx;
							height: 32rpx;
							margin-right: 13rpx;
						}

						.status1 {
							width: 32rpx;
							height: 32rpx;
							margin-right: 4rpx;
						}

						text {
							font-size: 24rpx;
							font-family: PingFang HK-Light, PingFang HK;
							font-weight: 300;
							color: #03DACE;
						}
					}

				}
			}
		}

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 42rpx;
		}

		.info {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.avatar {
				display: flex;
				align-items: center;

				.photo {
					width: 132rpx;
					height: 132rpx;
					margin-right: 24rpx;
					position: relative;

					.img {
						width: 132rpx;
						height: 132rpx;
						border-radius: 50%;

					}

					.level {
						position: absolute;
						top: 0;
						right: 0;
						width: 55rpx;
						height: 46rpx;
					}
				}

				.info1 {
					flex: 1;

					.top {
						font-size: 32rpx;
						font-family: PingFang HK-Regular, PingFang HK;
						font-weight: 400;
						color: #FFFFFF;
						margin-bottom: 15rpx;
					}

					.status {
						font-size: 20rpx;
						font-family: PingFang SC-Light, PingFang SC;
						font-weight: 300;
						color: rgba(255, 255, 255, 0.8);
						border-radius: 31rpx;
						background: rgba(255, 255, 255, 0.15);
						padding: 4rpx 8rpx 4rpx 20rpx;
						display: inline-flex;
					}
				}
			}
		}
	}

	.more {
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		border-top: 1rpx solid #5260AB;
		padding: 24rpx 0;
	}

	.make {
		background-image: url('https://tb.wuyouzhuan888.com/applet-icon/xiaohao.png');
		background-size: 100% 100%;
		width: 210rpx;
		height: 132rpx;

		.title {
			text-align: center;
			font-size: 30rpx;
		}

		.num {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
		}
	}
</style>